"use client";
import React from "react";

import {Tooltip, ActionIcon, NumberInput, Stack} from "@mantine/core";
import {modals} from "@mantine/modals";
import {notifications} from "@mantine/notifications";
import {IconPercentage60} from "@tabler/icons-react";

export const AlgoPercentage = ({value}: {value: number}) => {
  return (
    <Tooltip
      label="算法1、2权重配置"
      withArrow
      position="bottom"
      transitionProps={{transition: "fade", duration: 300}}
    >
      <ActionIcon
        variant="light"
        color="teal"
        onClick={() => {
          modals.openConfirmModal({
            title: "算法1、2权重配置",
            children: (
              <Stack>
                <NumberInput
                  label="算法1权重（%）"
                  description="简介：简要介绍一下算法1是什么"
                  placeholder="请输入权重"
                  min={0}
                  defaultValue={value} // 应该从后端请求
                  withAsterisk
                />
                <NumberInput
                  label="算法2权重（%）"
                  description="简介：简要介绍一下算法2是什么"
                  placeholder="请输入权重"
                  min={0}
                  defaultValue={value} // 应该从后端请求
                  withAsterisk
                />
              </Stack>
            ),
            labels: {confirm: "确定", cancel: "取消"},
            onCancel: () => console.log("Cancel"),
            onConfirm: () => {
              console.log("Confirmed");
              notifications.show({
                color: "green",
                title: "算法1、2权重配置",
                message: "配置成功",
              });
            },
          });
        }}
      >
        <IconPercentage60 size={16} />
      </ActionIcon>
    </Tooltip>
  );
};
